<template>
  <div class="bookItem">
    <div class="bookImg">
      <el-image class="img" :src="book.coverUrl" fit="fit"></el-image>
    </div>
    <div class="bookMsg">
      <h3 @click="toBook(book.id)">{{ book.bookName }}</h3>
      <div class="message qs">
        <a class="author" @click="toAuthor(book.writerId)">{{ book.writerName }}</a>
        |
        <a class="catalog" @click="toCatalog(book.catalog)">{{
          book.catalog
        }}</a>
        -
        <a class="catalog" @click="toCatalog(book.parentCatalog)">{{
          book.parentCatalog
        }}</a>
        |
        <span>{{ book.continuedState }}</span>
      </div>
      <p class="synopsis">{{ book.briefIntroduction }}</p>
      <div class="update">
        <span class="qs">{{ book.words }}字</span> |
        <a @click="toChapter(book.chapterId)" class="chapter">{{
          book.chapterTitle
        }}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  props: {
    book: {
      type: Object,
      required: true,
      default: () => {
        return {
          id: 0,
          coverUrl: "",
          bookName: "夜的命名术",
          writerId: 36,
          writerName: "会说话的肘子",
          parentCatalog: "异能",
          catalog: "都市",
          briefIntroduction:"蓝与紫的霓虹中，浓密的钢铁苍穹下，数据洪流的前端，是科技革命之后的世界，也是现实与虚幻的分",
          continuedState: 连载中,
          words: "999",
          chapterTitle: "决战",
          updateTime:"2001-12-16",
          subscription:9999
        };
      },
    },
  },
 
  methods: {
    toBook(id) {
      this.$store.commit("routeJump/updateToBookAction",{bookId:id});
    },
    toAuthor(id) {
      alert(id);
    },
    toCatalog(catalog) {
      alert(catalog);
    },
    toChapter(id) {
      alert(id);
    },
  },
};
</script>

<style scoped>

.bookItem {
  /* 容器指定为Flex布局 */
  display: flex;
  /* 主轴为水平方向，起点在左端。 */
  flex-direction: row;
  /* 如果一条轴线排不下，不换行。 */
  flex-wrap: nowrap;
  /* 主轴上的对齐方式。两端对齐，项目之间的间隔都相等。 */
  justify-content: flex-start;
  position: relative;
}

.bookMsg {
  width: 380px;
  margin-left: 10px;
}
.message {
  margin: 4px 0;
  font-size: 12px;
}
.synopsis {
  line-height: 22px;
  margin-bottom: 10px;
  display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.update {
  font-size: 12px;
  line-height: 22px;
  position: absolute;
  bottom: 5px;
}
.qs {
  color: #aea6ae;
}
.catalog:hover {
  color: red;
}
.author:hover {
  color: #262649;
}
.chapter:hover {
  color: #3f5a93;
}
.img {
  width: 95px;
  height: 125px;
}
</style>